<style>
.loginbox {
  border: 1px solid black;
  height: 200px;
  width: 300px;
  margin: auto;
}
.main {
  height: 100%;
  width: 100%;
}
.accountText {
  float: left;
  padding-left: 30px;
  height: 40px;
  line-height: 40px;
}
.account {
  margin-top: 20px;
}
.passwordText {
  float: left;
  padding-left: 30px;
  height: 40px;
  line-height: 40px;
}
.password {
  margin-top: 10px;
}
.btngroup {
  margin-top: 20px;
}
.el-input {
  width: 200px;
}
</style>
<template>
  <div id="main" class="main">
    <div id="loginbox" class="loginbox">
      <div id="account" class="account">
        <div class="accountText">工号</div>
        <el-input type="text" maxlength="8" v-model="account" />
      </div>
      <div id="password" class="password">
        <div class="passwordText">密码</div>
        <el-input type="password" v-model="password" />
      </div>
      <div id="btngroup" class="btngroup">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="primary">注册</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      account: "",
      password: ""
    };
  },
  computed: {},
  methods: {
    login: function() {
      if (this.account != "" && this.account != null) {
        if (this.password != "" && this.password != null) {
          this.$store.commit("SET_ACCOUNT", this.account);

          this.$router.replace({ path: "/main" });
        } else {
          alert("请输入密码");
        }
      } else {
        alert("请输入工号");
      }
    }
  }
};
</script>
